function setCustomPhone(globalDegree) {

    html2canvas($(".wrap-phone-case"), {
	onrendered: function(canvas) {
	    // canvas is the final rendered <canvas> element
	    var myImage = canvas.toDataURL("image/png");
	    $("#img-canvas").val(myImage);
	}
    });
    //use to write to db
    var widthCustom = $("#visible-img").width();
    var postionCustom = $("#visible-img").position();
    if (postionCustom) {
	$("#custom-width").val(widthCustom);
	$("#top-img").val(postionCustom.top);
	$("#left-img").val(postionCustom.left);
	$("#degree-img").val(globalDegree);
    }
}


$(document).ready(function() {
    var urlSite = $('#url-site').val();
    var globalDegree = 0;
    var edit = $('#edit-custom').prop('tagName');
    var isRotate = 0;
    //if user is editting custom case
    if (edit !== 'undefine') {
	globalDegree = $("#degree-img").val();
    }
    setCustomPhone(globalDegree);
    var degreeChange = $('#degree-img').val();
    if (!degreeChange) {
	degreeChange = 0;
    }
    var widthChange = $('#custom-width').val();
    if (!widthChange) {
	widthChange = 103;
    }


    $('#rotate-btn').mouseup(function() {
	setCustomPhone(globalDegree);//rewrite to canvas
    });
    $('#rotate-btn').mousedown(function() {
	isRotate = 1;
    });

    $('#rotate-btn').knobKnob({
	snap: 10,
	value: degreeChange,
	turn: function(ratio) {
	    if ((edit !== 'undefined' && isRotate) || edit === 'undefined') {
		var degree = Math.round(360 * ratio);
		globalDegree = degree;
		$('.img-custom').rotate({animateTo: degree});
	    }

	}
    });

    $("#slider-range-min").slider({
	range: "min",
	value: widthChange,
	min: 1,
	max: 700,
	slide: function(event, ui) {
	    $('.img-custom').css('width', ui.value);
	}
    });

    $("#slider-range-min").mouseup(function() {
	setCustomPhone(globalDegree);//rewrite to canvas
    });

    //drag the image
    $('#invisible-img').draggable({
	start: function() {
	},
	drag: function() {
	    var top = Number($(this).position().top);
	    var left = Number($(this).position().left);
	    $('#visible-img').css({
		top: top,
		left: left
	    });
	},
	stop: function() {
	    var top = Number($(this).position().top);
	    var left = Number($(this).position().left);
	    $('#visible-img').css({
		top: top,
		left: left
	    });
	    setCustomPhone(globalDegree);//rewrite to canvas
	}
    });


    $('#close-overlay').click(function() {
	$('#upload-img-over-lay').hide();
    });
    $('#change-img').click(function() {
	$('#upload-img-over-lay').show();
	$('#close-overlay').show();

    });

    $('#error-modal').modal();

    $('.total_order').keyup(function(e) {
	if (e.keyCode > 31 && (e.keyCode < 48 || e.keyCode > 57)) {
	    //if key is not number
	    var total = $(this).val();
	    $(this).val(total.substring(0, total.length - 1));
	}
    });

    //delete order
    $('.delete-order').click(function() {
	var self = $(this)
	var idOrder = $(this).attr('id-arr-order');
	$.post(urlSite + 'cart/delete', {idOrder: idOrder}, function() {
	    self.parent().parent().remove();
	});

    });

    jQuery(document).bind("keyup keydown", function(e) {
	if (e.ctrlKey && e.keyCode == 80) {

	    PrintElem('#print');

	}
    });
    function PrintElem(elem)
    {
	printContent($(elem).html());
    }

    function printContent(data) {
	var mywindow = window.open('', 'my div', 'height=430,width=750');
	mywindow.document.write('<html><head><title>asasas</title>');
	mywindow.document.write('<link rel="stylesheet" href="http://localhost/yii/phonecase/www/css/style.css" type="text/css" />');
	mywindow.document.write('</head><body>');
	mywindow.document.write(data);
	mywindow.document.write('</body></html>');

	mywindow.print();
	mywindow.close();
	return true;
    }

});


